<template>
  <div id="login" class="login" style="text-align: center">
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt=""/>
    </div>
    <div class="wrap">
      <h1>注 册</h1>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="form"
               style="position: absolute;left: -20%">
        <el-form-item label="用户名" prop="userName"
                      :rules="[
          { required: true, message: '请注意昵称长度在4~15个字符', trigger: 'blur' },
          { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
        ]">
          <el-input v-model="ruleForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
          <el-input v-model="ruleForm.userEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="userCode" :rules="[
          { required: true, message: '6位验证码', trigger: 'blur' },
          { min: 6, max:6, message: '请输入6位验证码', trigger: 'blur' }
        ]">
          <el-input v-model="ruleForm.userCode" autocomplete="off" style="width: 62%"></el-input>

          <el-button type="primary" @click="getCode">获取验证码</el-button>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[
          { required: true, message: '请注意密码长度应大于8', trigger: 'blur' },
          { min: 8, message: '密码长度应大于8', trigger: 'blur' }
        ]">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPassword" :rules="[
          { required: true, message: '确认密码', trigger: 'blur' }
        ]">
          <el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="signUp">注册</el-button>

        </el-form-item>
      </el-form>
      <div class="suffix">
        <p @click="toRegister">注册帐号</p>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {

  name: "register",
  data() {

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      imgSrc: require('@/assets/123.jpg'),
      ruleForm: {
        userName: '',
        userEmail: '',
        password: '',
        userCode: '',
        checkPassword: ''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],

      }
    }
  },
  methods: {
    getCode: function () {
      if (this.ruleForm.userEmail === '') {
        this.$message.warning("请输入邮箱！");
        return;
      }
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/user/getEmailCode',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          email: this.ruleForm.userEmail
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            switch (res.data.code) {
              case 0:
                this.$message.success("发送成功！");
                break;
              case 40000:
                this.$message.success("发送失败！");
                break;
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    signUp: function () {
      window.alert(JSON.stringify(this.ruleForm))
      // 检查表单是否有填写内容
      if (this.ruleForm.userName === '') {
        this.$message.warning("请输入用户名！");
        return;
      }
      if (this.ruleForm.password === '') {
        this.$message.warning("请输入密码！");
        return;
      }
      if (this.ruleForm.userEmail === '') {
        this.$message.warning("请输入邮箱！");
        return;
      }
      if (this.ruleForm.checkPassword === '') {
        this.$message.warning("请再次输入密码！");
        return;
      }
      if (this.ruleForm.userCode === '') {
        this.$message.warning("请输入验证码！");
        return;
      }

      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/user/register',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          userName: this.ruleForm.userName,
          userAccount: this.ruleForm.userName,
          userPassword: this.ruleForm.password,
          checkPassword: this.ruleForm.checkPassword,
          email: this.ruleForm.userEmail,
          code: this.ruleForm.userCode
        })
      })
          .then(res => {
            switch (res.data.code) {
              case 0:
                this.$message.success("注册成功！");
                this.$router.push('/login');
                break;
              case 40000:
                this.$message.error(res.data.description);
                break;
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    toRegister: function () {
      // 跳转注册的路由
      this.$router.push('/register');
    }
  }
}
</script>

<style scoped>
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  top: 8%;
  z-index: -1;
  position: absolute;

}

#login {
  font-family: 'Noto Serif SC', serif;
  margin-top: 60px;
  position: center;
}
#login >>> .el-input__inner {
  font-family: 'Noto Serif SC', serif;
}
#login .bgbox {
  display: block;
  opacity: 1;
  z-index: -3;
  position: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s, transform .25s, filter .25s;
  backface-visibility: hidden;
}
#login .logo {
  cursor: pointer;
  overflow: hidden;
  height: 150px;
}
#login .wrap {
  width: 300px;
  height: 315px;
  padding: 0 25px 0 25px;
  line-height: 40px;
  position: relative;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
}
#login .btn_login {
  margin-top: 25px;
  text-align: center;
}
#login .btn_login button{
  line-height: 10px;
  font-family: 'Noto Serif SC', serif;
  width: 100%;
  height: 38px;
}
#login .suffix {
  font-size:14px;
  line-height:10px;
  color:#999;
  cursor: pointer;
  float:right;
}
</style>
